آموزش The Freelance Stack: پروژه واقعی با NextJS و Strapi [ویدئو]

سرفصل ها و درس ها

معرفی Introduction

• معرفی دوره Course Intro

• Freelance Stack چیست؟ What is the Freelance Stack?

• نحوه گذراندن این دوره How to go through this course

دوره Crash NextJS NextJS Crash Course

• چرا از NextJS استفاده می کنیم؟ Why are we using NextJS?

• چرا از NextJS استفاده می کنیم؟ Why are we using NextJS?

• راه اندازی یک پروژه NextJS Setting up a NextJS Project

• راه اندازی یک پروژه NextJS Setting up a NextJS Project

• مسیریابی ساده در NextJS Simple Routing in NextJS

• مسیریابی ساده در NextJS Simple Routing in NextJS

• چیدمان در NextJS Layouting in NextJS

• چیدمان در NextJS Layouting in NextJS

• پیوند از صفحه به صفحه Linking from Page to Page

• پیوند از صفحه به صفحه Linking from Page to Page

• بررسی اجمالی اجزای سرور و کلاینت Server and Client Components Overview

• بررسی اجمالی اجزای سرور و کلاینت Server and Client Components Overview

• واکشی داده ها Data Fetching

• واکشی داده ها Data Fetching

• مسیریابی پویا Dynamic Routing

• مسیریابی پویا Dynamic Routing

• صفحات یافت نشد Not Found Pages

• صفحات یافت نشد Not Found Pages

معرفی برنامه نویس Figma Developer Intro To Figma

• Figma چیست و چگونه از آن استفاده کنیم What is Figma and how to use it

• Figma چیست و چگونه از آن استفاده کنیم What is Figma and how to use it

معرفی برنامه نویس Figma Developer Intro To Figma

راه اندازی اولیه پروژه NextJS، Strapi و Sass Initial Project Setup NextJS, Strapi, and Sass

• NextJS Base Setup NextJS Base Setup

• NextJS Base Setup NextJS Base Setup

• ویدئوی یک ظاهر طراحی شده: Sass Setup Styling Video: Sass Setup

• ویدئوی یک ظاهر طراحی شده: Sass Setup Styling Video: Sass Setup

• ویدیوی سبک: متغیرها و تایپوگرافی Styling Video: Variables and Typography

• ویدیوی سبک: متغیرها و تایپوگرافی Styling Video: Variables and Typography

• نمای کلی راه اندازی ما (و چرا آن را به این شکل تنظیم کردیم) Overview of our setup (and why we set it up this way)

• نمای کلی راه اندازی ما (و چرا آن را به این شکل تنظیم کردیم) Overview of our setup (and why we set it up this way)

• نصب و بررسی اجمالی استرپی Strapi Installation and Overview

• نصب و بررسی اجمالی استرپی Strapi Installation and Overview

راه اندازی اولیه پروژه NextJS، Strapi و Sass Initial Project Setup NextJS, Strapi, and Sass

صفحه فرود و صفحه تجربه با اجزای طرح بندی Landing Page & Experience Page with Layout Components

• سربرگ ساختار JSX Header JSX Structure

• سربرگ ساختار JSX Header JSX Structure

• استایل: سربرگ Styling: Header

• استایل: سربرگ Styling: Header

• ساختار پاورقی JSX Footer JSX Structure

• ساختار پاورقی JSX Footer JSX Structure

• استایل: پاورقی Styling: Footer

• استایل: پاورقی Styling: Footer

• ساختار JSX بخش قهرمان Hero Section JSX Structure

• ساختار JSX بخش قهرمان Hero Section JSX Structure

• استایل: بخش قهرمان Styling: Hero Section

• استایل: بخش قهرمان Styling: Hero Section

• ساختار JSX InfoBlocks InfoBlocks JSX Structure

• ساختار JSX InfoBlocks InfoBlocks JSX Structure

• یک ظاهر طراحی: InfoBlocks Styling: InfoBlocks

• یک ظاهر طراحی: InfoBlocks Styling: InfoBlocks

• صفحه تجربه: استفاده مجدد از بخش قهرمان و بلوک های اطلاعاتی ایجاد شده Experience Page: Reuse created Hero Section and Infoblocks

• صفحه تجربه: استفاده مجدد از بخش قهرمان و بلوک های اطلاعاتی ایجاد شده Experience Page: Reuse created Hero Section and Infoblocks

• یک ظاهر طراحی: رنگ سرصفحه را در هر مسیر تنظیم کنید Styling: Adjust Header colour per path

• یک ظاهر طراحی: رنگ سرصفحه را در هر مسیر تنظیم کنید Styling: Adjust Header colour per path

صفحه فرود و صفحه تجربه با اجزای طرح بندی Landing Page & Experience Page with Layout Components

اتصال Frontend ما به Strapi Connecting our Frontend to Strapi

• ایجاد نوع محتوای InfoBlock در Strapi Creating InfoBlock Content Type on Strapi

• ایجاد نوع محتوای InfoBlock در Strapi Creating InfoBlock Content Type on Strapi

• از Single Content Type در Strapi برای ایجاد InfoBlocks در هر صفحه استفاده کنید Use Single Content Type in Strapi to create InfoBlocks per page

• از Single Content Type در Strapi برای ایجاد InfoBlocks در هر صفحه استفاده کنید Use Single Content Type in Strapi to create InfoBlocks per page

• داده های InfoBlock را در Strapi واکشی کنید Fetch InfoBlock Data on Strapi

• داده های InfoBlock را در Strapi واکشی کنید Fetch InfoBlock Data on Strapi

• داده ها را از Strapi واکشی کنید و آن را پردازش کنید Fetch Data from Strapi and process it

• داده ها را از Strapi واکشی کنید و آن را پردازش کنید Fetch Data from Strapi and process it

• رندر InfoBlocks در صفحه Render InfoBlocks on page

• رندر InfoBlocks در صفحه Render InfoBlocks on page

• ایجاد دکمه از اطلاعات InfoBlock Strapi در صفحه Create Button from InfoBlock Strapi Data on page

• ایجاد دکمه از اطلاعات InfoBlock Strapi در صفحه Create Button from InfoBlock Strapi Data on page

• رندر InfoBlocks در صفحه تجربه Render InfoBlocks on Experience page

• رندر InfoBlocks در صفحه تجربه Render InfoBlocks on Experience page

اتصال Frontend ما به Strapi Connecting our Frontend to Strapi

صفحه اصلی وبلاگ Main Page of the Blog

• مقاله ساختار JSX را برجسته کنید Highlight Article JSX Structure

• مقاله ساختار JSX را برجسته کنید Highlight Article JSX Structure

• یک ظاهر طراحی: مقاله برجسته Styling: Highlight Article

• یک ظاهر طراحی: مقاله برجسته Styling: Highlight Article

• اشتراک در خبرنامه ساختار JSX Subscribe To Newsletter JSX Structure

• اشتراک در خبرنامه ساختار JSX Subscribe To Newsletter JSX Structure

• سبک: مشترک شدن در کامپوننت خبرنامه Styling: Subscribe to Newsletter Component

• سبک: مشترک شدن در کامپوننت خبرنامه Styling: Subscribe to Newsletter Component

• عملکرد مشترک شدن در جزء خبرنامه Functionality Subscribe to Newsletter Component

• عملکرد مشترک شدن در جزء خبرنامه Functionality Subscribe to Newsletter Component

• موارد ویژه مولفه ساختار JSX Featured Items Component JSX Structure

• موارد ویژه مولفه ساختار JSX Featured Items Component JSX Structure

• یک ظاهر طراحی شده اجزای آیتم های ویژه Styling Featured Items Component

• یک ظاهر طراحی شده اجزای آیتم های ویژه Styling Featured Items Component

صفحه اصلی وبلاگ Main Page of the Blog

وبلاگ را در Frontend از طریق Strapi و NextJS پیاده سازی کنید Implement Blog on Frontend through Strapi and NextJS

• نوع مقاله وبلاگ را در Strapi ایجاد کنید Create blog article type on Strapi

• نوع مقاله وبلاگ را در Strapi ایجاد کنید Create blog article type on Strapi

• داده های مقاله وبلاگ را در Strapi وارد کنید Input blog article data on Strapi

• داده های مقاله وبلاگ را در Strapi وارد کنید Input blog article data on Strapi

• ارائه مقالات از داده های Strapi در صفحه اصلی وبلاگ Render articles from Strapi data on main page of the blog

• ارائه مقالات از داده های Strapi در صفحه اصلی وبلاگ Render articles from Strapi data on main page of the blog

• مسیرهای پویا را برای همه مقالات وبلاگ ایجاد کنید Create dynamic routes for all blog articles

• مسیرهای پویا را برای همه مقالات وبلاگ ایجاد کنید Create dynamic routes for all blog articles

وبلاگ را در Frontend از طریق Strapi و NextJS پیاده سازی کنید Implement Blog on Frontend through Strapi and NextJS

مقاله وبلاگ کاملا قابل تنظیم ایجاد کنید Create Fully Customisable Blog Article

• ایجاد منطقه پویا در Strapi برای محتوای وبلاگ قابل تنظیم Create dynamic zone in Strapi for customisable blog content

• ایجاد منطقه پویا در Strapi برای محتوای وبلاگ قابل تنظیم Create dynamic zone in Strapi for customisable blog content

• ایجاد داده برای مقاله برجسته Creating data for highlight article

• ایجاد داده برای مقاله برجسته Creating data for highlight article

• بخش قهرمان مقاله JSX Article Hero Section JSX

• بخش قهرمان مقاله JSX Article Hero Section JSX

• سبک: بخش قهرمان مقاله Styling: Article Hero Section

• سبک: بخش قهرمان مقاله Styling: Article Hero Section

• مولفه معرفی مقاله JSX Article Intro Component JSX

• مولفه معرفی مقاله JSX Article Intro Component JSX

• یک ظاهر طراحی: مولفه معرفی مقاله Styling: Article Intro Component

• یک ظاهر طراحی: مولفه معرفی مقاله Styling: Article Intro Component

• کامپوننت Generic Article برای ارائه مولفه های مختلف بسته به داده های Strapi Generic Article Component to render different component depending on Strapi data

• کامپوننت Generic Article برای ارائه مولفه های مختلف بسته به داده های Strapi Generic Article Component to render different component depending on Strapi data

• عنوان مقاله JSX Article Headline JSX

• عنوان مقاله JSX Article Headline JSX

• استایل: عنوان مقاله Styling: Article Headline

• استایل: عنوان مقاله Styling: Article Headline

• متن با Image Component JSX Text with Image Component JSX

• متن با Image Component JSX Text with Image Component JSX

• یک ظاهر طراحی: متن با مولفه تصویر Styling: Text with Image Component

• یک ظاهر طراحی: متن با مولفه تصویر Styling: Text with Image Component

• بند مقاله JSX Article Paragraph JSX

• بند مقاله JSX Article Paragraph JSX

• یک ظاهر طراحی: بند مقاله Styling: Article Paragraph

• یک ظاهر طراحی: بند مقاله Styling: Article Paragraph

• کامپوننت تصویر JSX Image Component JSX

• کامپوننت تصویر JSX Image Component JSX

• استایل: کامپوننت تصویر Styling: Image Component

• استایل: کامپوننت تصویر Styling: Image Component

• بخش مقالات دیگر در صفحه وبلاگ فردی Other Articles Section on Individual Blog Page

• بخش مقالات دیگر در صفحه وبلاگ فردی Other Articles Section on Individual Blog Page

• صفحه اصلی بخش وبلاگ JSX Blog Section Homepage JSX

• صفحه اصلی بخش وبلاگ JSX Blog Section Homepage JSX

• سبک: صفحه اصلی بخش وبلاگ Styling: Blog Section Homepage

• سبک: صفحه اصلی بخش وبلاگ Styling: Blog Section Homepage

• اصلاح مورد مقاله برای موارد ویژه در صفحه اصلی Fix Article Item for Featured Items on Homepage

• اصلاح مورد مقاله برای موارد ویژه در صفحه اصلی Fix Article Item for Featured Items on Homepage

مقاله وبلاگ کاملا قابل تنظیم ایجاد کنید Create Fully Customisable Blog Article

بخش رویدادها - ایجاد قابلیت ثبت نام برای Surfcamps و رویدادهای ارائه شده Events Section - Create Signup Functionality for Offered Surfcamps & Events

• ارسال درخواست در Strapi با ثبت نام در خبرنامه Post Requests in Strapi with the Newsletter Signup

• ارسال درخواست در Strapi با ثبت نام در خبرنامه Post Requests in Strapi with the Newsletter Signup

• Frontend را به Signup Component در Strapi متصل کنید Hook up Frontend to Signup Component in Strapi

• Frontend را به Signup Component در Strapi متصل کنید Hook up Frontend to Signup Component in Strapi

• نوع محتوای شرکت کننده و رویداد Strapi Strapi Participant and Event Content Type

• نوع محتوای شرکت کننده و رویداد Strapi Strapi Participant and Event Content Type

• تغذیه داده ها به Strapi برای همه رویدادها Feeding Data into Strapi for all events

• تغذیه داده ها به Strapi برای همه رویدادها Feeding Data into Strapi for all events

• فرم ثبت نام JSX Signup Form JSX

• فرم ثبت نام JSX Signup Form JSX

• استایل: فرم ثبت نام Styling: Signup Form

• استایل: فرم ثبت نام Styling: Signup Form

• عملکرد فرم ثبت نام: ارسال داده ها به Strapi از صفحه رویدادهای اصلی Signup Form Functionality: Sending data to Strapi from main events page

• عملکرد فرم ثبت نام: ارسال داده ها به Strapi از صفحه رویدادهای اصلی Signup Form Functionality: Sending data to Strapi from main events page

• صفحات رویداد فردی را از قبل ایجاد کنید Pregenerate individual event pages

• صفحات رویداد فردی را از قبل ایجاد کنید Pregenerate individual event pages

• پردازش داده های رویداد Event Data Processing

• پردازش داده های رویداد Event Data Processing

• رندر صفحه رویداد فردی بر اساس داده های Strapi Render individual event page based off Strapi data

• رندر صفحه رویداد فردی بر اساس داده های Strapi Render individual event page based off Strapi data

• برای رویداد خاص ثبت نام کنید Sign up for specific event

• برای رویداد خاص ثبت نام کنید Sign up for specific event

• رویدادهای آینده را با یک جستجوی رشته ای از Strapi واکشی و فیلتر کنید Fetch and filter upcoming events with a string query from Strapi

• رویدادهای آینده را با یک جستجوی رشته ای از Strapi واکشی و فیلتر کنید Fetch and filter upcoming events with a string query from Strapi

• مولفه موارد ویژه را برای صفحه رویداد فردی تنظیم کنید Adjust featured items component for individual event page

• مولفه موارد ویژه را برای صفحه رویداد فردی تنظیم کنید Adjust featured items component for individual event page

• یک ظاهر طراحی: مؤلفه FeaturedItem برای رویداد تنظیم شده است Styling: FeaturedItem Component adjusted for event

• یک ظاهر طراحی: مؤلفه FeaturedItem برای رویداد تنظیم شده است Styling: FeaturedItem Component adjusted for event

• رویدادهای بیشتر را در صفحه رویداد فردی واکشی کنید و از شما متشکرم Fetch more events on individual event page & THANK YOU

• رویدادهای بیشتر را در صفحه رویداد فردی واکشی کنید و از شما متشکرم Fetch more events on individual event page & THANK YOU

بخش رویدادها - ایجاد قابلیت ثبت نام برای Surfcamps و رویدادهای ارائه شده Events Section - Create Signup Functionality for Offered Surfcamps & Events

اعزام به هروکو Deployment to Heroku

• نمای کلی استقرار Deployment Overview

• نمای کلی استقرار Deployment Overview

• سرور Strapi را در Heroku مستقر کنید Deploy Strapi Server to Heroku

• سرور Strapi را در Heroku مستقر کنید Deploy Strapi Server to Heroku

• تفاوت بین تولید استراپی و توسعه محلی Difference between Production Strapi and Local Development

• تفاوت بین تولید استراپی و توسعه محلی Difference between Production Strapi and Local Development

• پایگاه داده محلی را از SQLite به Postgres به پایگاه داده تولید منتقل کنید Migrate local database from SQLite to Postgres to the production database

• پایگاه داده محلی را از SQLite به Postgres به پایگاه داده تولید منتقل کنید Migrate local database from SQLite to Postgres to the production database

• با AWS S3 آپلود تصاویر در حال تولید را مدیریت کنید Handle Image Uploads in Production with AWS S3

• با AWS S3 آپلود تصاویر در حال تولید را مدیریت کنید Handle Image Uploads in Production with AWS S3

• برای استفاده از تصاویر سطل AWS S3، مسیرهای تصویر را در db تولید جایگزین کنید Replace image paths in production db to use AWS S3 bucket images

• برای استفاده از تصاویر سطل AWS S3، مسیرهای تصویر را در db تولید جایگزین کنید Replace image paths in production db to use AWS S3 bucket images

• استقرار NextJS Frontend در Heroku Deployment of NextJS Frontend to Heroku

• استقرار NextJS Frontend در Heroku Deployment of NextJS Frontend to Heroku

اعزام به هروکو Deployment to Heroku